<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="never">
    <link rel="stylesheet" href="../css/base.css">
    <script src="../js/common.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.js"></script>
    <link rel="import" href="../vue-component/navBar.html">
    <!-- <link rel="import" href="../vue-component/film-item.html"> -->
    <link rel="import" href="../vue-component/film-list.html">
    <!-- 火狐浏览器不兼容此方法 -->
    <title>电影首页</title>
    <script>
        // console.log(navBar);
        Vue.component("navBar",navBar);
        // Vue.component("filmItem",filmItem);
        Vue.component("filmList",filmList);
    </script>
    <script>
        window.onload=function(){
            new Vue({
                el:".app",
                data:{
                    types:[]
                },
                methods:{
                    filmSort(){
                        $.ajax({
                            url:"http://localhost/film-project/filmApi/loadTyps.php",
                            dataType:"json",
                            success:({result})=>{
                                // console.log(result);
                                this.types=result;
                                for(let i in this.types){
                                    this.filmById(this.types[i].typeId,i);
                                }
                            }
                        })
                    },
                    filmById(typeId,i){
                        $.ajax({
                            url:"http://localhost/film-project/filmApi/loadFilms.php",
                            dataType:"json",
                            data:{
                                typeId
                            },
                            success:({result})=>{
                                // console.log("result");
                                // this.types[i].list=result;
                                this.$set(this.types[i],"list",result);
                            }
                        })
                    }
                },
                mounted(){
                    this.filmSort();
                    // this.filmById();
                    console.log(this);
                }
            })
        }
    </script>
</head>
<body>
    <!--  项目容器  -->
    <div class="app">
        <!-- 电影搜索栏 -->
        <nav-bar></nav-bar>
        <!-- 首页正文 -->
        <div class="content-box">
            <div class="home-box">
                <div v-for="type in types" :key="type.typeId">
                    <div class="list-name">
                        <span>{{type.typeName}}</span>
                        <span class="list-more">更多 > </span>
                    </div>
                    <!-- <div class="list-content">
                        <film-item v-for="film in type.list" :key="film.filmId" :film="film"></film-item>
                    </div> -->
                    <film-list class="list-content" :list="type.list"></film-list>
                </div>
            </div>
        </div>
    </div>
</body>

</html>